<!--单行文本-->
<template>
  <el-autocomplete
    v-model="value"
    v-bind="extend"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
    :clearable="clearable"
    :fetch-suggestions="querySearch"
  >
    <template #default="{ item }">
      <div class="name">
        {{ item.value }}
        <span class="addr" style="float:right">{{ item.label }}</span>
      </div>
    </template>
  </el-autocomplete>
</template>

<script >
  import { defineComponent } from 'vue'
  import { ElAutocomplete } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController, loadController } from '../../map'

export default defineComponent({
  name: 'el-form-item-text',
  inheritAttrs: false,
  components: {
    ElAutocomplete
  },
  props: {
    ...itemProps, // 基础属性
    modelValue: [String, Array, Number]
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    // console.log('props-text', props)
    // console.log('props-ctx', context)
    const {
      value
    } = itemController(props, context.emit) // value、mySubmit

    // com的查询事件
    const querySearch = (str, cb) => {
      // const results = str
      //  ? props.optionList.filter((item) =>
      //      item.value.indexOf(str.toString().toLowerCase()) === 0)
      //  : props.optionList

      // 调用 callback 返回建议列表的数据
      cb(props.optionList)
      // cb(results)
    }

    // 从后端获取数据
    const { loadDict } = loadController(props)
    loadDict()

    return {
      value,
      querySearch
    }
  }
})
</script>
